<template>
    <el-upload 
        :disabled="$attrs.disabled"
        action="" 
        :multiple="$attrs.multiple"
        :show-file-list='$attrs.showFileList'
        :list-type="$attrs.listType||'text'"
        :limit="$attrs.limit" 
        :accept="$attrs.accept" 
        :file-list="value" 
        :data="$attrs.data"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :before-upload="$attrs.beforeUpload"
        :http-request="handlerUpload"
        :on-progress="handleProgress"
        :on-error="handleError"
        v-loading.fullscreen.lock="isOnProgress"
        element-loading-text="正在上传..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(243, 243, 243, 0.3)"
        >
            <button type="button" class="Avie_btn_special_confirm" v-if="$attrs.listType != 'picture-card'" ><i class="iconfont icon-lenghan"></i>上传</button>
            <i class="el-icon-plus" v-else></i>
            <div slot="tip" class="el-upload__tip">{{$attrs.tips}}</div>
    </el-upload>
</template>

<script>
export default {
    props: {
    },
    data() {
        return {
            isOnProgress: false
        };
    },

    computed: {
        value: {
            get () {
                return this.$attrs.defaultValue || [];
            },
            set (v) {
                let list = this.DataChange(v);
                this.Change('change',list);
            }
        }
    },
    created() {
    },
    methods: {
        async handlerUpload (file) {
            console.log(file)
            let form = new FormData()
            form.append('file', file.file)
            let data = await this.Lushu.upload(form)
            this.handleSuccess(data, file.file)
        },
        handleSuccess(response, file, fileList) {
                this.isOnProgress = false
                // this.value.push()
                this.value = [...this.value, {url: response, name: file.name, uid: file.uid}]
                
        },
        async handleRemove(file, fileList) {
            // await this.Lushu.delAttachment({url: file.url})
            this.value = fileList;
            let list = this.DataChange(this.value);
        },
        handleExceed(files,fileList){
            let str = this.$attrs.limitTips || `最大上传数${this.$attrs.limit}`;
            this.$message.warning(str);
        },
        DataChange(list){
            return list.map(el => {
                let url = '';
                if(el.response){
                    url = el.response.data;
                }else{
                    url = el.url;
                }
                return {
                    name:el.name,
                    url,
                }
            });
        },
        Change(type, data) {
            this.$emit('EventHandler', type, this.$attrs.prop, data);
        },
        handleProgress() {
            if(!this.isOnProgress) this.isOnProgress = true
        },
        handleError() {
            this.isOnProgress = false
        }
    }
};
</script>

<style>
.el-upload-list--picture-card .el-upload-list__item-status-label{
    line-height: 24px
}
</style>
